<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <home-swiper ref="hSwiper" :banners="banners"></home-swiper>
    <recommends-view :recommends="recommends"></recommends-view>
    <feature-view></feature-view>
    <tab-control class="tab-control" :title="['流行', '新款', '精品']"></tab-control>
    <hr>
    <div style="width: 100%;height: 1000px; background-color: grey;"></div>
  </div>
</template>

<script>
  //导入 home 的子组件
  import HomeSwiper from './childComps/HomeSwiper'
  import RecommendsView from './childComps/RecommendView'
  import FeatureView from './childComps/FeatureView'

  //导入 公共
  import NavBar from 'common/navbar/NavBar'
  import TabControl from 'content/tabControl/TabControl'

  // 导入 工具
  import {
    getHomeMultidata, getHomeGoods,
    BANNER, RECOMMEND
  } from 'network/home'

  export default {
    name: 'Home',
    data() {
      return {
        banners: [],
        recommends: [],
        goodsList: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []}
        },
      }
    },
    components: {

      HomeSwiper,
      RecommendsView,
      FeatureView,

      NavBar,
      TabControl,
    },
    created(){
      // 1. 请求轮播图
      this.getMultiData()

      // 2. 请求商品数据
      this.getHomeProducts('pop')
      this.getHomeProducts('new')
      this.getHomeProducts('shell')

    },
    activated: function () {
      this.$refs.hSwiper.startTimer()
    },
    deactivated: function () {
      this.$refs.hSwiper.stopTimer()
    },
    methods: {
      // 轮播图请求
      getMultiData() {
        console.log('methods getMultiData')
        getHomeMultidata().then(res=>{
          console.log(res);
          this.banners = res.data[BANNER].list
          this.recommends = res.data[RECOMMEND].list
          // console.log('banners=', this.banners)
          console.log('recommends=', this.recommends)
        })
      },

      getHomeProducts(type) {
        const page = this.goodsList[type].page + 1
        getHomeGoods(type, page).then(res=>{
          console.log('getHomeProducts  res=\n', res)
          const goodsList = res.data.list;
          this.goodsList[type].list.push(...goodsList)
          this.goodsList[type].page =  page
        }).catch(err=>{
          console.log('getHomeProducts err=\n', err)
        })
      }
    }
  }
</script>

<style>
  .home-nav {
    background-color: var(--color-tint);
    color: white;
  }

  .tab-control {
    top: 0px;
    position: sticky;
    /*
      支持 移动端，不支持 ie
      -------------------
      公司项目 不会用这个
    */
  }
</style>